
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { fetchGetSocietyList } from '@/api/society'

const value1 = ref(true)
const table = ref(false)
/**
 * 申请退社
 */
const applyQuit = () => {
  ElMessageBox.confirm(
    '你确定要退出该社团吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
    })
    .catch(() => {
    })
}
// 过滤活动类型
const filterActivityType = (val: number) => {
  switch (val) {
    case 1:
      return '社团活动'
    case 2:
      return '院级活动'
    case 3:
      return '校级活动'
  }
}
// 过滤活动状态
const filterActivityStatus = (val: number) => {
  switch (val) {
    case 0:
      return '报名未开始'
    case 1:
      return '报名中'
    case 2:
      return '报名已结束'
    case 3:
      return '活动未开始'
    case 4:
      return '活动进行中'
    case 5:
      return '活动已结束'
  }
}

const tableData = [
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 1, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 1 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 3 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 1, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 4 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 1, // 活动形式：0线下，1线上
    activityType: 3,// 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 5 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 3, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 0 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 5 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 2, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 2 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 2, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 4 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 1 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 2, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 0 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
];

let societyList = ref([{
  name:'社团名'
}])
// 获取加入的社团列表
const getPageList = () => {
  let societyList = useUserStore().userInfo.society.split('-')
  console.log(societyList)
  if (societyList.length == 3) {
    societyList = [societyList[1]]
  } else if (societyList.length == 5) {
    societyList = [societyList[1], societyList[3]]
  } else if (societyList.length == 7) {
    societyList = [societyList[1], societyList[3], societyList[5]]
  }
  fetchGetSocietyList({ society: societyList }).then((res: any) => {
    console.log(res)
    societyList[0] = res.data.data[0]
  })
}
onMounted(() => {
  getPageList()
});

</script>

<template>
  <div class="society-container flex">
    <!-- <div class="joinCard flex flex-column items-center justify-around">
      <h1>志愿者协会</h1>
      <el-button class="btn-green">前往管理</el-button>
      <div class="switch-box">
        <span>招聘已关闭</span>
        <el-switch v-model="value1" />
      </div>
      <div class="joinPosition">
        社长
      </div>
    </div> -->
    <div class="joinCard flex flex-column items-center justify-around" v-for="(item, index) in societyList" >
      <h1>{{ item.name }}</h1>
      <div>
        <el-button @click="table = true" class="btn-green">参加社团活动</el-button>
        <el-button @click="applyQuit" class="btn-red">申请退出社团</el-button>
      </div>
      <div class="joinPosition">
        社长
      </div>
    </div>



    <el-drawer v-model="table" title="街舞社活动列表" direction="rtl" size="80%">
      <template #header="{ titleId }">
        <h1 :id="titleId">街舞社活动列表</h1>
      </template>
      <el-table :data="tableData" stripe>
        <el-table-column prop="activityName" label="活动名称" show-overflow-tooltip>
          <template #default="scope">
            <div class="theme-success">
              <el-button type="primary" link>{{ scope.row.activityName }}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="activityForm" label="活动形式" show-overflow-tooltip width="100">
          <template #default="scope">
            <div class="flex flex-center">
              <div class="student-button">{{ scope.row.activityForm == 0 ? '线上' : '线下' }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="activityType" label="活动类型">
          <template #default="scope">
            <div class="flex flex-center">
              <div class="student-button">{{ filterActivityType(scope.row.activityType) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="enterStartTime" label="报名开始时间" />
        <el-table-column prop="enterEndTime" label="报名截止时间">
        </el-table-column>
        <el-table-column prop="formalStartTime" label="活动开始时间">
        </el-table-column>
        <el-table-column prop="formalEndTime" label="活动截止时间">
        </el-table-column>
        <el-table-column prop="issueSociety" label="发布机构">
        </el-table-column>
        <el-table-column prop="score" label="二课分" width="80">
          <template #default="scope">
            <div>
              {{ scope.row.score.toFixed(1) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="activityStatus" label="活动状态" width="120">
          <template #default="scope">
            <div class="flex flex-center">
              <div class="student-button">{{ filterActivityStatus(scope.row.activityStatus) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="操作">
          <template #default="scope">
            <div class="theme-success">
              <el-button type="primary">立即参加</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.society-container {
  flex-wrap: wrap;

  .joinCard {
    width: 36.5rem;
    height: 20rem;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 2rem;
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
    color: #303133;
    margin: 1rem;
    transition: all 0.5s;

    &:hover {
      box-shadow: 0 2px 12px 0 #2FBFB7;
    }

    h1 {
      font-size: 2.4rem;
    }

    .switch-box {
      align-self: flex-end;
      padding: 0 4rem;

      span {
        margin-right: 1rem;
      }
    }

    .joinPosition {
      text-align: center;
      position: absolute;
      top: 20%;
      left: -15%;
      width: 185px;
      height: 30px;
      line-height: 30px;
      color: #eee3cd;
      font-weight: 600;
      font-size: 20px;
      background: linear-gradient(90deg, #2FBFB7, #49E498);
      transform: rotate(-45deg);
    }
  }
}

.student-button {
  border: 1px solid #DAECFE;
  color: #409EFF;
  background-color: #ECF5FF;
  // width: 5.5rem;
  padding: 0 0.8rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  border-radius: 0.5rem;
}
</style>
<style lang="scss">
.el-drawer__header {
  margin-bottom: 0px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;

  h1 {
    text-align: center;
    color: #2FBFB7;
  }
}
</style>
